<template>
  <div>
    <div class="search_time">
      <DatePicker
        type="month"
        v-model="modalConfig.startTime"
        placeholder="请选择年月"
        style="width: 200px"
        @on-change="changeDate"
      />
      <Button
        class="header-btn"
        type="primary"
        ghost
        style="height: 32px; margin-left: 5px"
        @click="searchList()"
      >
        查询
      </Button>
    </div>
    <TableList
      :columns="monthColumns"
      :data="monthData"
      :loading="loadingTable"
      :page.sync="modalConfig.pageIndex"
      :size.sync="modalConfig.pageSize"
      :total="monthTotal"
      @queryFun="getMonthData"
    >
    </TableList>

    <!-- <TableList :columns="monthColumns" :data="monthData"> </TableList>
    <div class="search_time">
      <Page
        :current="modalConfig.pageIndex"
        :total="monthTotal"
        :page-size="modalConfig.pageSize"
        show-total
        show-elevator
        show-sizer
        :page-size-opts="pageSizeOptions"
        @on-page-size-change="changePageSize"
        @on-change="changePage"
      />
    </div> -->
  </div>
</template>

<script>
import { monthStatistic } from '@/api/drill';
  export default {
    name:'monthlyAnalysis',
    props:{
      type:{
        type:Number,
        default:()=> null
      },
      hwType:{
        // 1-实网演练 2-众测演练  4-仿真
        type:Number,
        default:()=> null
      }
    },
    data () {
      return {
        loadingTable:false,
        modalConfig:{
          pageSize:10,
          pageIndex:1,
          startTime:'',
          endTime:'',
        },
        pageSizeOptions:[10,20],
        yearMonth:'',
        monthData:[],
        monthTotal:0,
        monthColumns:[
        //  {
        //     type: 'index',
        //     width: 60,
        //   },
          {
            title: '月份',
            key: 'dateS',
            tooltip:true
          },
          {
            title: '项目数',
            key: 'contestCount',
            tooltip:true
          },
          {
            title: '参与测试人数',
            key: 'userCount',
            tooltip:true
          },
          {
            title: '参与测试单位数',
            key: 'companyCount',
            tooltip:true
          },
      ]
      }
    },
    watch:{
      hwType:{
        handler(val,old){
          if(val !== old){
            this.getMonthData()
          }
        },
        deep:true,
      }
    },
    mounted () {
      this.$nextTick(()=>{
        if(this.modalConfig.startTime == '' || !this.modalConfig.startTime){
          this.modalConfig.startTime = this.getMonthTimeStart
          this.modalConfig.endTime = this.getMonthTimeEnd
          this.yearMonth = this.getMonthTimeStart
          this.getMonthData()
        }
      })
    },
    computed:{
      getMonthTimeStart(){
        // 创建一个 Date 对象
        let currentDate = new Date();
        // 获取当前年份
        let currentYear = currentDate.getFullYear();
        // 获取当前月份（需要加1来得到实际的月份值）
        let currentMonth = currentDate.getMonth() + 1;
        // 格式化日期和时间
        let formattedDate = currentYear + '-' + (currentMonth < 10 ? '0' : '') + currentMonth + '-01 00:00:00';
        // 打印格式化后的日期时间
        // console.log(formattedDate);
        return formattedDate;
      },
      getMonthTimeEnd(){
        // 创建一个 Date 对象
        let currentDate = new Date();
        // 获取当前年份
        let currentYear = currentDate.getFullYear();
        // 获取当前月份（需要加1来得到实际的月份值）
        let currentMonth = currentDate.getMonth() + 1;
        // 获取当前月份的最后一天
        let lastDay = new Date(currentYear, currentMonth, 0).getDate();
        // 格式化日期和时间
        let formattedDate = currentYear + '-' + (currentMonth < 10 ? '0' :        '') + currentMonth + '-' + lastDay + ' 23:59:59';
        // 打印格式化后的日期时间
        // console.log(formattedDate);
        return formattedDate;
      },
    },
    methods:{
      init(){
        this.modalConfig={
          pageSize:10,
          pageIndex:1,
          startTime:'',
          endTime:'',
        }
      },
      // 改变日期
      changeDate(date){
        console.log('===改变日期',date);
        this.yearMonth = date + '-01 00:00:00'
         // 获取年份和月份
        let year = parseInt(date.split('-')[0]);
        let month = parseInt(date.split('-')[1]);
        // 获取当月最后一天
        let lastDay = new Date(year, month, 0).getDate();
        // 设置结束时间为当月最后一天的 23:59:59
        this.modalConfig.endTime = date + '-' + lastDay + ' 23:59:59';
        // this.getMonthData()
      },
      changePage(val){
        this.modalConfig.pageIndex = val
        this.getMonthData()
      },
      changePageSize(val){
        this.modalConfig.pageSize = val
        this.getMonthData()
      },
      // 因为在日期那里赋值会触发状态，所以点击查询时查
      searchList(){
        this.getMonthData()
      },
      getMonthData(){
        this.loadingTable = true
        let params = {
          pageSize:this.modalConfig.pageSize,
          pageIndex:this.modalConfig.pageIndex,
          startTime:this.yearMonth,
          endTime:this.modalConfig.endTime,
        }
        // 1实网测试，2仿真对抗，3众测演练
        if(this.hwType == 1){
          params.type = 1
        }else if(this.hwType == 2){
          params.type = 3
        }else if(this.hwType == 4){
          params.type = 2
        }
        monthStatistic(params).then(res=>{
          console.log('===',res);
          if(res.code == 1){
            this.monthData = res.data.list
            this.monthTotal = res.data.total
            this.loadingTable = false
          }else{
            this.monthTotal = 0
            this.monthData = []
            this.loadingTable = false
            this.$Message.error(res.message)
          }
        }).catch(error=>{
          this.monthTotal = 0
          this.monthData = []
          this.loadingTable = false
          this.$Message.error(error)
        })
      }
    },
  }
</script>

<style scoped>
.search_time {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>